<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
      *{
        margin: 0px;
        padding: 0px;
      }
      #outter{
        width: 820px;
        height: 520px;
        background-color: greenyellow;
        margin: 50px auto;
        /* 开启相对定位 */
        position: relative;
        /* 对溢出的图片隐藏显示 */
        overflow: hidden;
        
      }
      #imgUl{
        height: 500px;
        width: 4100px;
        /* 去除无序列表的默认样式 */
        list-style: none;
        /* 开启绝对定位 */
        position: absolute;
        /* 每向左移动150px就会显示下一张图片 */
        left: 0px;

      }
      #imgUl li{
        padding: 10px 10px;
        /* 设置浮动 */
        float: left;
      }
      #navDiv{
        /* 开启绝对定位 */
        position: absolute;
        /* 设置div的位置 */
        bottom: 20px;
      }
      #navDiv a{
        /* 内联元素变为块元素，设置为浮动 */
        float: left;
        /* 设置超链接的宽高 */
        width: 20px;
        height: 20px;
        background-color: red;
        /* 设置超链接间的外边距 */
        margin: 0px 5px;
        /* 设置元素背景的透明度 */
        opacity: 0.5;
        /* 设置元素背景的透明度，兼容IE8及以下的 */
        filter: alpha(opacity=50);

      }
      #navDiv a:hover{
        /* 鼠标移入时变为黑色 */
        background-color: black;
      }
  </style>
<script type="text/javascript">
  window.onload = function(){
    var imgUl = document.getElementById("imgUl");
    var imgArr = document.getElementsByClassName("imgShow");
    // 设置列表的宽度
    imgUl.style.width = 820 * imgArr.length +"px";
    // 设置导航栏居中显示
    var outter = document.getElementById("outter");
    var navDiv = document.getElementById("navDiv");
    navDiv.style.left = (outter.offsetWidth - navDiv.offsetWidth)/2+"px";
    // 设置图片导航栏默认选中的效果
    var aList = document.getElementsByClassName("imgA");
    aList[0].style.backgroundColor = "black";
    // 图片选中的索引
    var index = 0;
    /**
     * 点击超链接进行图片的切换
     *     点击第一个超链接显示第一张图片，同时导航栏变黑
     * 特别注意这里，是先执行for循环的函数，
     *     执行完之后i=aList.length，之后才会执行点击函数
     *     因此下面的function()内部获取不到正确的i的
    */
   for(var i=0;i<aList.length;i++){
      // 为每一个超链接添加一个num属性用来保存变量i的值
      aList[i].num = i;
      aList[i].onclick = function(){
        // 用this代替aList[i]，此处不能用aList[i]
        // 将当前选中的超链接变黑
        this.style.backgroundColor = "black";
        index = this.num;
        // 设置当前该显示的图片
        imgUl.style.left = (-820*index) + "px";
        // 将其他未选中的超链接的样式去掉
        for(var j=0;j<aList.length;j++){
          if(j != index){
            aList[j].style.backgroundColor = "";
          }
        }
      }
   }
   
   // 轮播图自动切换
   setInterval(function(){
      moveImg(aList,index,imgUl)
      index++;
      index %= imgArr.length;
   },1000);

  }
  function moveImg(aList,index,imgUl){
     // 将当前选中的超链接变黑
     aList[index].style.backgroundColor = "black";
     // 设置当前该显示的图片
    imgUl.style.left = (-820*index) + "px";
    // 将其他未选中的超链接的样式去掉
    for(var j=0;j<aList.length;j++){
      if(j != index){
        aList[j].style.backgroundColor = "";
      }
    }
  }
</script>
</head>
<body >
  <div id="outter">
    <ul id="imgUl">
      <li><img src="img/11.jpeg" class="imgShow"></li>
      <li><img src="img/12.jpeg" class="imgShow"></li>
      <li><img src="img/13.jpeg" class="imgShow"></li>
      <li><img src="img/14.jpeg" class="imgShow"></li>
      <li><img src="img/15.jpeg" class="imgShow"></li>
    </ul>
    <div id="navDiv">
        <a href="#" class="imgA"></a>
        <a href="#" class="imgA"></a>
        <a href="#" class="imgA"></a>
        <a href="#" class="imgA"></a>
        <a href="#" class="imgA"></a>
    </div>
  </div>
</body>
</html> 